<template>
  <div class="flash-box">
    <div class="flash-top">
      <h2>小米闪购</h2>
    </div>
    <div class="flash-bottom">
      <ul>
        <li>
          <div class="bottom1">10:00场</div>
          <div class="bottom2">
            <img src="../assets/s.jpg" />
          </div>
          <div class="bottom3">
            <p>距离结束还有</p>
            <span class="span1">{{hour}}</span>
            <i>:</i>
            <span>{{min}}</span>
            <i>:</i>
            <span>{{seconds}}</span>
          </div>
        </li>
        <li class="flash-goods" v-for="(item,index) in goodslist"  :key="index" :style="{'border-top':item.color}">
          <div>
            <img :src="item.url" />
          </div>
          <h3>{{item.h3name}}</h3>
          <p>{{item.pname}}</p>
          <p class="price">
            <span>{{item.price}}元</span><del>{{item.delname}}元</del>
          </p>
        </li>
      </ul>
    </div>
    <div class="flash-img">
        <img src="../assets/mi9.1.jpg"/>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hour: null,
        min: null,
        seconds: null,
        goodslist:[{
          color:"1px solid #83c44e",
          url:require("@/assets/good4.jpg"),
          h3name:"15.6笔记本 i5 8G MX110 白色",
          pname:"全面均衡的国民轻薄本",
          price:"3499",
          delname:"4599"
        },
        {
          color:"1px solid #2196f3",
          url:require("@/assets/good1.jpg"),
          h3name:"米家空气净化器Pro H 白色",
          pname:"全面净化，整屋除醛去味",
          price:"1599",
          delname:"1699"
        },
        {
          color:"1px solid #e53935",
          url:require("@/assets/good2.jpg"),
          h3name:"小米米家智能摄像机云台版 白",
          pname:"高清画质，守护家的每一面",
          price:"179",
          delname:"199"
        },
        {
          color:"1px solid #00c0a5",
          url:require("@/assets/good3.jpg"),
          h3name:"1九号平衡车 黑色",
          pname:"年轻人的酷玩具",
          price:"1849",
          delname:"1999"
        }
        ],
        // colorlist:["1px solid #83c44e","1px solid #2196f3","1px solid #e53935","1px solid #00c0a5"]
      }
    },
    components: {

    },
    methods: {
      getDate() {
        let myDate = new Date()
        let hour = myDate.getHours() //获取当前系统的小时数
        let min = myDate.getMinutes() //获取当前系统的分钟
        let senconds = myDate.getSeconds() //获取当前系统的秒数
        let timer = setInterval(() => {
          hour = hour
          min = min
          senconds = senconds
          senconds++
          if (senconds == 60) {
            min++
            senconds = 0
            if (min == 60) {
              hour++
              min = 0
              if (hour == 24) {
                hour = 0
              }
            }
          }
          this.hour = hour
          this.min = min
          this.seconds = senconds
        }, 1000)
      }
    },
    mounted() {
      this.getDate()
    },
  }
</script>

<style scoped="scoped">
  .flash-box {
    position: relative;
    width: 100%;
    height: 36.75rem;
    background-color: #f5f5f5;
  }

  .flash-box .flash-top {
    position: absolute;
    left: 10.625rem;
  }

  .flash-box .flash-top h2 {
    font-size: 1.375rem;
    font-weight: 200;
    padding-top: 0.625rem;
  }

  .flash-box .flash-bottom {
    position: absolute;
    left: 10.625rem;
    top: 4.125rem;

  }

  .flash-box .flash-bottom ul li {

    width: 13.6rem;
    height: 21.125rem;
    float: left;
    border-top: 1px solid #e53935;
    margin-right: 1.6rem;
    background-color: #FFFFFF;

  }

  .flash-box .flash-bottom ul li .bottom1 {
    text-align: center;
    padding-top: 3.25rem;
    font-size: 1.3125rem;
    color: #EF3A3B;
  }

  .flash-box .flash-bottom ul li .bottom2 {
    margin: 0 auto;
  }

  .flash-box .flash-bottom ul li .bottom2 img {
    display: block;
    margin: 0 auto;
    padding-top: 2.25rem;
  }

  .flash-box .flash-bottom ul li .bottom3 p {
    padding-top: 1.25rem;
    text-align: center;
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, .54);
  }

  .flash-box .flash-bottom ul li .bottom3 span {
    display: inline-block;
    width: 2.875rem;
    height: 2.875rem;
    background-color: #605651;
    color: #FFFFFF;
    text-align: center;
    line-height: 2.875rem;
    margin-top: 1.625rem;

  }

  .flash-box .flash-bottom ul li .bottom3 .span1 {
    margin-left: 1.7rem;
  }

  .flash-box .flash-bottom ul li .bottom3 i {
    font-style: normal;
  }

  .flash-box .flash-bottom ul .flash-goods {
    width: 19.6rem;
  }

  .flash-box .flash-bottom ul .flash-goods div {
    width: 10rem;
    height: 10.375rem;
    margin: 0 auto;
    padding-top: 2.25rem;
  }

  .flash-box .flash-bottom ul .flash-goods div img {
    max-width: 100%;
  }

  .flash-box .flash-bottom ul .flash-goods h3 {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;

  }

  .flash-box .flash-bottom ul .flash-goods p {
    text-align: center;
    font-size: 0.75rem;
    color: #B0B0B0;
    padding-top: 0.3125rem;
  }

  .flash-box .flash-bottom ul .flash-goods .price {
    padding-top: 1.625rem;
  }

  .flash-box .flash-bottom ul .flash-goods .price span {
    color: #FF6709;
    font-size: 0.875rem;
    margin-right: 0.425rem;
  }

  .flash-box .flash-bottom ul .flash-goods .price del {
    font-size: 0.875rem;
  }
  .flash-box  .flash-img{

    position: absolute;
    width: 98.2rem;
    left: 10.625rem;
    top: 27.1875rem;

  }
   .flash-box  .flash-img img{
     max-width: 100%;
     height: auto;
   }
</style>
